<template>
  <div class="whe_maxv">
    <div class="he_max wh_f">
      <!--      左侧导航栏-->
      <div class=" topdq" :style="dynamicStyles" style="transition: 0.2s;">
        <AdminLeft @routerLink="addrouterLink"></AdminLeft>
      </div>
      <!--      右侧菜单/路由-->
      <div class="he_max flex_1 gl_yc" style="z-index: 1;"
           :class="isDarkMode.isDarkMode.value?'ba_qhei':'ba_qhui'">
        <!--          右侧头部菜单-->
        <div class="czjz_flex wh_f"
             :class="isDark.isDarkMode?'ssms':'qsms'"
             style="height: 50px;
             ">
          <div class="flex_1">
              <span @click="UpdaLayout" :class="isDarkMode.isDarkMode.value?'iconssms_hover':'iconqsms_hover'"  class="mag_l-10 icon_hover" style="width: 20px;">
                <el-icon class="fz_20 centerdq"><Operation /></el-icon>
              </span>
          </div>
          <div class="flo_r">
            <div class="wh_f">
              <div class="flex_1 czjz_flex">
                <div>
                  <el-button @click="router.push('/DataAdmin')" type="primary" style="margin-right: 20px">数据中心</el-button>
                </div>
                <div>
                  <el-switch
                      v-model="Darkvalue"
                      @click="toggleDark"
                      :active-action-icon="Moon"
                      :inactive-action-icon="Sunrise"
                      style="--el-switch-on-color: #4e69fd; --el-switch-off-color: #ff4c00"
                  />
                </div>
                <div style="margin: 0 10px">
                  <span @click="addFull_screen"
                        :class="isDarkMode.isDarkMode.value?'iconssms_hover':'iconqsms_hover'" class="icon_hover">
                    <el-icon v-show="isFull" class=" fz_20 centerdq"><FullScreen /></el-icon>
                    <el-icon v-show="!isFull" class=" fz_14 centerdq"><FullScreen /></el-icon>
                  </span>
                </div>
              </div>
              <div class="flo_r" style="width: 70px">
                <el-dropdown>
                  <div class=" czjz_flex" >
                    <img  class="bor_255 xsgb jzxz" :src="vuex.userInfo.value.user_pic" height="40" width="40" alt=""/>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <div class="pad_10" style="width: 200px">
                        <div class="wz_jz">
                          <img class="bor_255 xsgb jzxz centerdq" :src="vuex.userInfo.value.user_pic" height="60" width="60" alt=""/>
                        </div>
                        <div class="ccsl_1 fz_16 wz_jz pad_10_0">
                          <span style="margin-left: 10px">{{vuex.userInfo.value.nickname}}</span>
                        </div>
<!--                        <img  class="bor_255 xsgb jzxz centerdq" :src="vuex.userInfo.value.user_pic" height="60" width="60" alt=""/>-->
<!--                        <span class="centerdq mag_l-10 fz_16">-->
<!--                          {{vuex.userInfo.value.nickname}}-->
<!--                        </span>-->
                      </div>
                      <el-dropdown-item divided>
                        <div class="wz_jz wh_max" @click="LogOut">
                          <el-icon class="centerdq" size="14"><delete /></el-icon>
                          <span class="fz_14 wz_jz centerdq">退出登录</span>
                        </div>
                      </el-dropdown-item>
                      </el-dropdown-menu>
                  </template>
                </el-dropdown>

                <div v-if="false" class="bor_255 czjz_flex boxs xsgb" style="width: 40px;height:40px;">
                  <el-dropdown>
                      <div class="el-dropdown-link czjz_flex" >
                        <el-icon><Avatar /></el-icon>
                      </div>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>个人资料</el-dropdown-item>
                        <el-dropdown-item disabled>Action 4</el-dropdown-item>
                        <el-dropdown-item divided>
                          <span @click="LogOut">退出登录</span></el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
                </div>
            </div>
          </div>
        </div>
        <!--          路由区域-->
        <div class="pad_20 ccgl" style="height: calc(100% - 50px);" >
          <transition name="router_gd">
            <router-view style="height: 100%"/>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
// 获取深色模式全局状态
import {storeVuex} from '@/store/modules/user'
import {storeToRefs} from "pinia";
// 引用状态存储
const vuex = storeToRefs(storeVuex())
const isDark = storeVuex()
//storeToRefs设置为响应式状态
const isDarkMode = storeToRefs(storeVuex())
import { Sunrise, Sunny,Moon,CloseBold,Delete } from '@element-plus/icons-vue'
// 全屏插件
import screenfull from "screenfull";
import AdminLeft from "@/components/AdminComponent/AdminLeft.vue";
import {Operation,FullScreen} from '@element-plus/icons-vue'
import {ref, type Ref, computed, onMounted, reactive} from "vue";

import { useRouter } from "vue-router";
const router = useRouter();

import {useDark, useToggle} from "@vueuse/core";
import {hotel, order, shop_type} from "@/api";
var add = ref(true)
// 切换左侧导航栏的长度(模拟隐藏导航栏)
const isActive = ref(true);
const dynamicStyles = computed(() => ({
  width: isActive.value ? '230px' : '0px'
}));
onMounted(() => {
  initialDark();
});
// 默认加载本地暗黑模式
const initialDark = ()=>{
  // 检查当前是否为暗黑模式
  const isDark = useDark()
  // 设置暗黑模式的开关为switch开关的值
  isDark.value = vuex.isDarkMode.value
}
// 暗黑模式按钮状态开关默认为关闭 (与切换方法无关)
const Darkvalue = ref(vuex.isDarkMode.value)
// 切换暗黑模式
const toggleDark = ()=>{
  // 检查当前是否为暗黑模式
  const isDark = useDark()
  // 设置暗黑模式的开关为switch开关的值
  vuex.isDarkMode.value=!vuex.isDarkMode.value
  isDark.value = vuex.isDarkMode.value
}

let switchRef = ref(null)
//退出登陆
const LogOut = ()=>{
  // 获取用户可访问的导航栏
  storeVuex().logout();
}
// 全屏属性
var isFull = ref(false)
const addFull_screen = ()=>{
  isFull.value = !isFull.value
  screenfull.isFullscreen; // 布尔值——当前页面是否全屏
  screenfull.isEnabled; // 布尔值——当前浏览器是否支持全屏
  // screenfull.request(); // 全屏
  // screenfull.exit(); // 退出全屏
  screenfull.toggle(); // 全屏切换
}
function UpdaLayout(){
  isActive.value = !isActive.value
  isDark.isEcharts = !isDark.isEcharts
}
// 调用父组件方法
const addrouterLink = (e:any)=>{
  router.push(e)
}
// 在此加载一些数据,防止重复请求
onMounted(()=>{
  getVueData()
  gethotel_name()
  // @ts-ignore
  getShop_type()
  getShop_clsss()
  getSourceList()
})
// 饭店列表
const gethotel_name = async()=>{
  const res = await hotel.getHotelList_name({shop_id:vuex.userType_id.value,});
  vuex.hotelList.value = res.data.data;
}
//获取产品分类
const getShop_type = async (e:any)=> {
  const res: any = await shop_type.getShop_type({
    shop_id: vuex.userType_id.value,
    type: e,
    is_show:1
  })
  vuex.shopList.value = res.data.data.data
}
let activeName = ref()
let shopClsssList = reactive([])
const getShop_clsss = async () => {
  const res: any = await shop_type.getShop_class({
    shop_id: vuex.userType_id.value
  })
  // 产品分类选项卡值默认为第一个产品
  activeName = res.data.data.data[0].id
  // 拿到分类id 去查询产品分类
  //getShop_type(activeName)
  // 所有产品分类列表
  vuex.shopClsssList.value = res.data.data.data

}
const getSourceList = async ()=>{
  const res: any = await order.getSourceList({
    shop_id: vuex.userType_id.value,
  })
  vuex.shopClsssList.value = res.data.data.data
}
const getVueData = async ()=>{

}
</script>
<style scoped>
::view-transition-new(root),
::view-transition-old(root) {
  /* 关闭默认动画，否则影响自定义动画的执行 */
  animation: none !important;
}

/*黑暗模式下，让旧节点的层级变高，否则会导致动画出不来*/
.dark::view-transition-old(root) {
  z-index: 10000;
}
</style>
<style scoped>
.AdminLeft_small:hover{
  background-color: #2e3033;
}
.wh_max-230{
  width: calc(100% - 230px);
}



.app-container {
  transition: background-color 0.5s ease, color 0.5s ease; /* 添加过渡效果 */
  padding: 20px;
  height: 100vh;
}

.dark-theme {
  background-color: #333; /* 深色背景 */
  color: #fff; /* 深色模式下的文字颜色 */
}

.el-menu {
  transition: background-color 0.5s ease; /* 菜单的背景过渡效果 */
}

.el-menu.dark-theme {
  background-color: #444; /* 深色模式下的菜单背景 */
}
</style>
